// 默认情况下，直接使用‘webpack ./src/main.js --output-filename ./dist/bunled.js --output-path . --mode development’ 就能实现项目的构建了
// 但是，如果只运行 webpack 命令的话，需要项目根目录中，创建‘webpack.config.js’的文件
// 而且，在这个配置文件中，必须显示生命 要处理的路径 和 输出的文件路径
 
// const path = require('path')

// 注意： 这里使用的node中的语法，向外暴露了一个配置文件
// 因为webpack这个构建工具，底层就是使用nonde.js开发出来的

const path = require('path');

// 导入 把HTML页面生成到内存中的插件
const htmlWebpackPlugin = require('html-webpack-plugin')

// 导入项目中的webpack
// const webPack = require('webpack');


const VueLoaderPlugin = require('vue-loader/lib/plugin')  // 解决vue is not define的问题

module.exports = {
    mode:'development',
    entry:'./src/main.js', // 指定处理的js文件路径
    output:{
        path:path.resolve(__dirname,'./dist'), //指定输出文件的存放路径
        filename:'bundle.js' // 指定输出文件的名称
    },
    plugins: [// 插件的数组
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({// 创建一个把HTML首页托管到内存的插件
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html' // 指定，将来内存中复制出来的页面，名称叫做index.html
        }),
        // new webPack.HotModuleReplacementPlugin()
        
    ],
    // 第二种用server打开方式 对于--open这样的指令他们不能共存
    // devServer: {
    //     open: true,
    //     port: 3000,
    //     host: '127.0.0.1',
    //     hot: true  // 热更新
    // },
    module: { // 用来配置 非JS文件对应的loader的
        rules: [ // 就是这些非JS和loader之间的对应关系
            // 先运行的是'css-loader'再运行'style-loader'，最后再交给webpack.config.js进行打包处理
            {test: /\.css$/,use:['style-loader','css-loader']}, // 创建处理css文件的loader匹配规则
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test: /\.jpg|png|gif|bmp$/,use: [
                // 'url-loader?limit=748,285&name=[hash:6][name].[ext]',
                {
                    loader: 'url-loader?limit=748,285&name=[hash:6][name].[ext]',
                    options: {
                        esModule: false
                    }
                }
            ]}, // 如果只有一个可以不用加 [] 来形成数组形式
            // 可以使用？给url-loader传递参数，其中，有一个固定的参数，叫做limit，表示图片的大小，需要给定一个数值
            // limit给定的数值，是图片的大小，单位是Byte（字节）
            // 如果指定了limit参数，则知识图片大小，小于给定的值得时候，才会转为base64格式的图片；否则，就不转换

            // 后面加的&name=[name].[ext]表示图片的名字不变，但是如果发生有两张图片的名字在一样则第二张图片把第一张覆盖;   
            // 解决方法是在[name].[ext]的前面加一个hash可以取图片的任意位数[hash:6]表示取图片前6位
            {test: /\.js$/,use:'babel-loader',exclude:/node_modules/},
            // 添加转换JS文件的loader，其中，必须把node_modules目录设置为排除项，这样，在打包的时候，会忽略node_modules目录下的所有JS文件，否则项目运行不起来
            {test: /\.vue$/,use: 'vue-loader'}, // 解析Vue组件的第三方loader
            {test: /\.ttf|woff|woff2|eot|svg$/,use: 'url-loader'}
        ]
    },
    resolve: {
        alias: { //别名
            // 'vue$': 'vue/dist/vue.js'
        }
    }
}